<%--
  Created by IntelliJ IDEA.
  User: xiaoyuyu
  Date: 2019/7/2
  Time: 16:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>
        X-admin v1.0
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
      <a><cite>首页</cite></a>
      <a><cite>商品管理</cite></a>
      <a><cite>商品列表</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <form class="layui-form x-center" action="" style="width:50%">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                <!--<label class="layui-form-label">日期范围</label>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
                </div>
                <div class="layui-input-inline">
                    <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
                </div>-->
                <label class="layui-form-label" style="width:60px">所属分类</label>
                <div class="layui-input-inline" style="width:120px;text-align: left">
                    <select name="father_code" id="father_c">
                        <option value="0">顶级分类</option>
                        <%--<c:forEach items="${classifies}" var="classifyInfo">
                            <option value="${classifyInfo.code}">${classifyInfo.name}</option>
                        </c:forEach>--%>

                    </select>
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn"  lay-submit="" lay-filter="classify_sreach"><i class="layui-icon">&#xe615;</i></button>
                </div>
                <div class="layui-input-inline" >
                    <input type="text" name="condition"  placeholder="输入条码或者商品名称或类别" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
                </div>
            </div>
        </div>
    </form>
    <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button><button class="layui-btn" onclick="product_add('添加商品','${pageContext.request.contextPath}/addProductPage','600','500')"><i class="layui-icon">&#xe608;</i>添加</button><span class="x-right" id="total-count" style="line-height:40px">共有数据：88 条</span></xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <input type="checkbox" name="" value="" id="c_classify_t">
            </th>
            <th>
                序号
            </th>
            <th>
                条码
            </th>
            <th>
                商品名称
            </th>

            <th>
                当前售价
            </th>
            <th>
                库存
            </th>
            <th>
                单位
            </th>
            <th>
                操作
            </th>
        </tr>
        </thead>
        <tbody id="x-link">
        <%--<c:forEach items="${products}" var="productInfo">
        <tr>
            <td>
                <input type="checkbox" value="1" name="">
            </td>
            <td>
                ${productInfo.id}
            </td>
            <td>
                    ${productInfo.bar_code}
            </td>
            <td >
                    ${productInfo.name}
            </td>
            <td >
                    ${productInfo.unit}
            </td>
            <td >
                    ${productInfo.price}
            </td>
            <td >
                    ${productInfo.amount}
            </td>
            <td class="td-manage">
                <a title="查看" href="javascript:;" onclick="product_show('查看','product-show.html','4','','510')"
                   class="ml-5" style="text-decoration:none"><i class="layui-icon">&#xe642;</i></a><a style="text-decoration:none"  onclick="product_edit('修改','product-edit.html','10001','600','400')"
                   href="javascript:;" title="修改"><i class="layui-icon">&#xe631;</i></a><a title="删除" href="javascript:;" onclick="product_del(this,'1')"
                   style="text-decoration:none"><i class="layui-icon">&#xe640;</i></a>
            </td>
        </tr>
        </c:forEach>--%>
        </tbody>
    </table>

    <div id="page"></div>
</div>
<script src="../../lib/layui/layui.js" charset="utf-8">
</script>
<script src="../../js/x-layui.js" charset="utf-8">
</script>
<script src="../../js/jquery.min.js" charset="utf-8"></script>
<script>
    <%--$.ajax({--%>
        <%--type:"POST",--%>
        <%--url:"${pageContext.request.contextPath}/findProductPageComprehensive",--%>
        <%--data:{"condition" : "水果","index":2},--%>
        <%--async:false,--%>
        <%--success:function (data) {--%>
            <%--console.log(data);--%>

        <%--}--%>
    <%--});--%>

    //进入页面加载第一页
    var currentPage = 1;
    //持久搜索条件
    var condition = "";
    $(function () {
        pageContro(currentPage,condition);

    });

    //清空当前页面列表
    function clear_list() {
        $("#x-link").replaceWith("<tbody id=\"x-link\"></tbody>");
        $("#father_c").replaceWith("<select name=\"father_code\" id=\"father_c\"><option value=\"0\">顶级分类</option></select>");
        //去掉全选勾
        $(".layui-table :checkbox:checked").each(function () {
            this.checked = false;
        });

    }
    //页面控制器
    function pageContro(currentPage,con){
        clear_list();
        condition = con;
        $.ajax({
            type:"POST",
            url:"${pageContext.request.contextPath}/findProductPageComprehensive",
            //pageCount是在前端控制后端每页显示多少条数据
            data: {"condition" : con,"index":currentPage,"pageCount":5},
            success:function (data) {
                // console.log(data);
                clear_list();
                layui.use(['layer','laypage'], function(){
                    laypage = layui.laypage;
                    laypage({

                        cont: 'page'
                        ,pages: Math.ceil(data.count/data.addtionData)
                        ,first: 1
                        ,last: Math.ceil(data.count/data.addtionData)
                        ,prev: '<em><</em>'
                        ,next: '<em>></em>'
                        ,curr:currentPage
                        ,jump: function(obj,first){
                            if(!first){
                                currentPage = obj.curr;
                                // console.log(currentPage);
                                pageContro(currentPage,con);
                            }

                        }
                    });
                });
                //填充总数据
                $("#total-count").replaceWith("<span class=\"x-right\" id=\"total-count\" style=\"line-height:40px\">共有数据："+ data.count +" 条</span>");
                //将查询到的数据填充到表格中
                $.each(data.data, function (index, obj) {
                    // console.log(obj);
                    index = index + 1;
                    //添加列表
                    $('#x-link').append("<tr><td><input type=\"checkbox\" value=\""+ obj.id +"\" name=\"\"></td><td>"+ index +"</td><td>"+ obj.bar_code +"</td><td>"+ obj.name +"</td><td>"+ obj.price +"</td><td>"+ obj.amount +"</td><td>"+ obj.unit +"</td><td class=\"td-manage\"><a title=\"查看\" href=\"javascript:;\" onclick=\"product_show('查看','${pageContext.request.contextPath}/findProductById?id="+ obj.id +"','4','','510')\"\n" +
                        "                   class=\"ml-5\" style=\"text-decoration:none\"><i class=\"layui-icon\">&#xe642;</i></a><a style=\"text-decoration:none\"  onclick=\"product_edit('修改','${pageContext.request.contextPath}/showProductById.edit.action?id="+ obj.id +"','10001','600','400')\"\n" +
                        "                   href=\"javascript:;\" title=\"修改\"><i class=\"layui-icon\">&#xe631;</i></a><a title=\"删除\" href=\"javascript:;\" onclick=\"product_del(this,'"+ obj.id +"')\"\n" +
                        "                   style=\"text-decoration:none\"><i class=\"layui-icon\">&#xe640;</i></a></td></tr>");
                });

                //查询所有类别
                layui.use(['form'], function(){
                    form = layui.form();
                    $.ajax({
                        type:"POST",
                        url:"${pageContext.request.contextPath}/findAllClassify",
                        success:function (data) {
                            // console.log(data);
                            $.each(data,function (index,obj) {
                                // console.log(obj);
                                //添加选择项
                                $("#father_c").append("<option value=\""+ obj.name +"\">"+ obj.name +"</option>");

                            });
                            form.render('select');
                        }
                    });
                });



            }
        });
    }


    layui.use(['laydate','element','laypage','layer','form'], function(){
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element();//面包导航
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层
        form = layui.form();

        form.on('submit(classify_sreach)', function(data){
            // console.log(data);

            //发异步，提交数据
            pageContro(1,data.field.father_code);


            return false;
        });

        form.on('submit(sreach)', function(data){
            // console.log(data);
            //发异步，提交数据
            pageContro(1,data.field.condition);


            return false;
        });

    });

    // 商品-查看
    function product_show (title,url,id,w,h) {
        x_admin_show(title,url,w,h);
    }
    /*商品-修改*/
    function product_edit(title,url,id,w,h){
        x_admin_show(title,url,w,h);
    }
    /*商品-添加*/
    function product_add(title,url,id,w,h){
        x_admin_show(title,url,w,h);
    }

    //选择全部
    $("#c_classify_t").click(function () {
        var checks = $("#x-link :checkbox");
        var c = this;
        checks.each(function () {
            if (c.checked){
                this.checked = true;
            }else {
                this.checked = false;
            }
        });
    });

    //批量删除提交
    function delAll () {
        var checks = $("#x-link :checkbox:checked");
        var list = [];
        checks.each(function () {
            list.push(Number(this.value));
        });
        // console.log(list);
        $.ajax({
            type:"POST",
            url:"${pageContext.request.contextPath}/deleteProducts",
            data: JSON.stringify(list),
            dataType: 'json',
            contentType: 'application/json',

            success:function (data) {
                if(data.state_code){
                    layer.alert("删除成功", {icon: 6});
                }else{
                    layer.alert("删除失败", {icon: 5});
                }
                pageContro(currentPage,"");
            }
        });
    }

    /*-删除*/
    function product_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            var list = [id];
            $.ajax({
                type:"POST",
                url:"${pageContext.request.contextPath}/deleteProducts",
                data: JSON.stringify(list),
                dataType: 'json',
                contentType: 'application/json',
                success:function (data) {
                    if(data.code == "0"){
                        layer.alert("删除失败", {icon: 5});
                    }else {
                        layer.alert("删除成功", {icon: 6});
                        pageContro(currentPage,"");
                    }

                }
            });
        });
    }


</script>

</body>
</html>
